<script setup>
import GameView from "@/views/FrontViews/StoreModule/Detail/components/GameView.vue";
import {formatTime} from "@/utils/format.js";

defineProps({
  game: Object,
  gameView: Object,
  gameDetail: Object,
  publisher: Object
})

</script>

<template>
  <div class="game-base-info">
    <div class="container">
      <div class="left">
        <GameView :gameView="gameView"/>
      </div>
      <div class="right">
        <div class="top">
          <div class="wider-picture">
            <img :src="gameDetail.widerPicture">
          </div>
          <div class="introduction ellipsis-3">
            {{gameDetail.introduction}}
          </div>
        </div>
        <div class="bottom">
          <div class="rate">
            <span class="desc">游戏评分:</span>
            <span>{{game.rate}}</span>
          </div>
          <div class="issue-date">
            <span class="desc">发行日期:</span>
            <span>{{formatTime(game.issueDate)}}</span>
          </div>
          <div class="developer">
            <span class="desc">开发商:</span>
            <span>{{game.developer}}</span>
          </div>
          <div class="publisher">
            <span class="desc">发行商:</span>
            <span>{{publisher.publisher}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.game-base-info {
  .container {
    margin: 20px auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    .left {
    }
    .right {
      background: linear-gradient(to right, $backgroundColor2 5%, $decorativeColor 95%);
      width: 460px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top {
        .wider-picture {
          margin-bottom: 6px;
        }
        .introduction {
          padding-right: 6px;
          color: #c6d4df;
        }
      }
      .bottom {
        div .desc {
          display: inline-block;
          width: 152px;
          height: 20px;
          line-height: 20px;
          color: #556772;
        }
        .rate {
          margin: 10px 0;
          font-size: 20px;
          span:last-child {
            color: $themeColor;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
          }
        }
        .issue-date {
          margin: 12px 0;
          font-size: 16px;
          span:last-child {
            color: #8f98a0;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
          }
        }
        .developer {
          margin-top: 10px;
          font-size: 16px;
          span:last-child {
            cursor: pointer;
            color: #67c1f5;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            &:hover {
              color: #fff;
            }
          }
        }
        .publisher {
          margin-top: 4px;
          margin-bottom: 12px;
          font-size: 16px;
          span:last-child {
            cursor: pointer;
            color: #67c1f5;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            &:hover {
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
